<template>
 <el-pagination
  :style="{marginTop: margin + 'px'}"
  @current-change="handleCurrentChange"
  background
  :page-size="size"
  layout="total, prev, pager, next, jumper"
  :pager-count="pager"
  :total="pageTotal">
 </el-pagination>
</template>

<script>
export default {
 name: "Pagination",
 props: ['pageSize', 'total', 'margin', 'count'],
 data: () => ({
  size: 20,
  pageTotal: 0,
  pager: 0
 }),
 created() {
  this.pageTotal = this.total
  this.size = this.pageSize
  this.pager = this.count
 },
 methods: {
  handleCurrentChange(e) {
   this.$emit('pageNum', e)
  }
 },
 watch: {
  pageSize(a, b) {
   this.size = a
  },
  total(a, b) {
   this.pageTotal = a;
  }
 }
}
</script>

<style scoped lang="scss">
.el-pagination {
 margin-top: 40px;
 display: flex;
 justify-content: center;
 align-content: center;
}
</style>
